<template>
    <div id="inst-info-content">
        <el-tabs type="card" v-model="activePane" closable @tab-remove="removeTab" @tab-click="handleTabClick">
            <el-tab-pane label="风险下单" name="1">
                <RiskOrder :detail="detail" :type="type" @reset="reset" />
            </el-tab-pane>
            <el-tab-pane label="指令管理" name="2">
                <InstructionInfo :renderCount="renderCountTab2" @changeTab="changeTab" @handelOperate="handelOperate" />
            </el-tab-pane>
            <el-tab-pane label="PCF基础数据" name="3">
                <PcfInfo :renderCount="renderCountTab3" />
            </el-tab-pane>
            <el-tab-pane v-for="item in panes" :key="item.key" :name="item.key">
                <span slot="label"><i class="el-icon-discover"></i>{{ item.title }} </span>
                <InstReportDetail :staticResult="staticResult" :history="history" style="padding: 20px"></InstReportDetail>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import RiskOrder from './etf-inst/etf-order.vue';
import InstructionInfo from './etf-inst/etf-order-info.vue';
import InstReportDetail from './invest-manage/Inst-report-detail.vue';
import InstClass from './class/inst-class';
import PcfInfo from './etf-inst/pcf-info.vue';

@Component({
    name: 'ETFInst',
    components: {
        RiskOrder,
        InstructionInfo,
        InstReportDetail,
        PcfInfo,
    },
})
// ETF指令
export default class ETFInst extends InstClass {
    renderCountTab2: number = 0; // 指令管理tab
    renderCountTab3: number = 0; // PCF数据tab
    /**
     * tab点击事件
     */
    handleTabClick() {
        if (this.activePane == '2') {
            // 刷新指令管理表格数据
            this.renderCountTab2++;
        } else if (this.activePane == '3') {
            this.renderCountTab3++;
        }
    }
}
</script>
<style lang="scss" scoped>
@import '@/pages/risk-time/styles/inst';
/deep/ .el-tabs .el-tabs__nav .el-tabs__item:nth-child(-n + 3) .el-icon-close {
    display: none;
}
</style>
